<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="http://localhost:8080"/>
    <title>遍历list例子</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
<div class="container">

    <div class="panel panel-default" h-each="user : {users}">
        <div class="panel-heading">
            <h3 class="panel-title" h-text="{user.username}">Panel title</h3>
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" h-each="hobby : {user.hobby}">
                   <span h-text="{hobby}"> item1</span>
                </li>
            </ul>
        </div>
    </div>

    
</div>

</div>

<script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.js"></script>
<!--<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>-->
<!--去掉下面两个js可以预览静态效果-->
<script type='text/javascript' src="../domTemplate.js"></script>
<script type='text/javascript' src="../dt.template.js"></script>
<script type='text/javascript' src="../dt.date.js"></script>
<script type="text/javascript">
    $(function () {
        var users=[];
        users.push({id:10,username:'小李',hobby:['篮球','足球']});
        users.push({id:20,username:'小王',hobby:['游泳','足球']});
        $.domTemplate.init({escape:false,'data':{users:users}});
    });

</script>

</body>
</html>